<!-- 分类内容组件 -->
<template>
  <div class="category-content">
    <!-- 左边和右边 -->
    <!-- 左边 -->
    <div class="left">
      <ul>
        <li v-for="(leftData, index) in leftDatas" :key="leftData.cat_id"
          :class="activeIndex == index ? 'li-active' : ''" @click="clickActiveFun(index, leftData.cat_id)">
          <p :class="activeIndex == index ? 'active' : ''">
            {{ leftData.cat_name }}
          </p>
        </li>
      </ul>
    </div>
    <!-- 右边 -->
    <div class="right" v-if="rightDatas">
      <!-- 广告图 -->
      <div class="adv">
        <img :src="advImg" alt="" />
      </div>
      <!-- 二级分类 -->
      <div class="item" v-for="rightData in rightDatas" :key="rightData.cat_id">
        <div class="title"><i>-</i>{{ rightData.cat_name }}<i>-</i></div>
        <!-- 三级分类 -->
        <ul>
          <li v-for="item in rightData.child" :key="item.cat_id" @click="toGoodsList(item.cat_id, item.cat_name)">
            <img :src="item.touch_icon" alt="" />
            <span>{{ item.cat_name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { CategoryListApi, CategoryRightApi } from "@/api/category.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      leftDatas: null,
      // leftDatas: [
      //   {
      //     cat_id: 858,
      //     cat_name: "家用电器",
      //   },
      //   {
      //     cat_id: 6,
      //     cat_name: "男装女装",
      //   },
      //   { cat_id: 8, cat_name: "鞋靴箱包" },
      //   {
      //     cat_id: 3,
      //     cat_name: "手机数码",
      //   },
      //   {
      //     cat_id: 4,
      //     cat_name: "电脑办公",
      //   },
      //   {
      //     cat_id: 5,
      //     cat_name: "家居家纺",
      //   },
      //   {
      //     cat_id: 860,
      //     cat_name: "个人化妆",
      //   },
      //   {
      //     cat_id: 866,
      //     cat_name: "休闲运动",
      //   },
      // ],
      // rightDatas: [
      //   {
      //     cat_id: 1,
      //     cat_name: "厨房电器",
      //     child: [
      //       {
      //         cat_id: 1131,
      //         cat_name: "电饭煲",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
      //       },
      //       {
      //         cat_id: 1130,
      //         cat_name: "电压力锅",
      //         touch_icon:
      //           "https://img14.360buyimg.com/n1/s300x300_jfs/t1/134016/4/1040/200492/5ed5297cE4dd22b3d/dec0baa9b25581f2.jpg",
      //       },
      //       {
      //         cat_id: 1132,
      //         cat_name: "豆浆机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175270619.jpg",
      //       },
      //       {
      //         cat_id: 1133,
      //         cat_name: "面包机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175339477.jpg",
      //       },
      //       {
      //         cat_id: 1134,
      //         cat_name: "咖啡机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175311141.jpg",
      //       },
      //       {
      //         cat_id: 1135,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1136,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1137,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1138,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //     ],
      //   },
      //   {
      //     cat_id: 2,
      //     cat_name: "大家电",
      //     child: [
      //       {
      //         cat_id: 1101,
      //         cat_name: "电饭煲",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
      //       },
      //       {
      //         cat_id: 1102,
      //         cat_name: "电压力锅",
      //         touch_icon:
      //           "https://img14.360buyimg.com/n1/s300x300_jfs/t1/134016/4/1040/200492/5ed5297cE4dd22b3d/dec0baa9b25581f2.jpg",
      //       },
      //       {
      //         cat_id: 1103,
      //         cat_name: "豆浆机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175270619.jpg",
      //       },
      //       {
      //         cat_id: 1104,
      //         cat_name: "面包机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175339477.jpg",
      //       },
      //       {
      //         cat_id: 1105,
      //         cat_name: "咖啡机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175311141.jpg",
      //       },
      //       {
      //         cat_id: 1106,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1107,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1108,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1109,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //     ],
      //   },
      //   {
      //     cat_id: 3,
      //     cat_name: "个护健康",
      //     child: [
      //       {
      //         cat_id: 1101,
      //         cat_name: "电饭煲",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
      //       },
      //       {
      //         cat_id: 1102,
      //         cat_name: "电压力锅",
      //         touch_icon:
      //           "https://img14.360buyimg.com/n1/s300x300_jfs/t1/134016/4/1040/200492/5ed5297cE4dd22b3d/dec0baa9b25581f2.jpg",
      //       },
      //       {
      //         cat_id: 1103,
      //         cat_name: "豆浆机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175270619.jpg",
      //       },
      //       {
      //         cat_id: 1104,
      //         cat_name: "面包机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175339477.jpg",
      //       },
      //       {
      //         cat_id: 1105,
      //         cat_name: "咖啡机",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490175311141.jpg",
      //       },
      //       {
      //         cat_id: 1106,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1107,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1108,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //       {
      //         cat_id: 1109,
      //         cat_name: "微波炉",
      //         touch_icon:
      //           "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536546954848.jpg",
      //       },
      //     ],
      //   },
      // ],
      rightDatas: null,
      // advImg:
      //   "https://x.dscmall.cn/storage/data/touch_catads/15630384831872.jpg",
      advImg: "",
      // 活性的active样式
      activeIndex: 0,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    clickActiveFun(index, cat_id) {
      this.activeIndex = index;
      // 根据index的不同请求后台不同的数据
      // 更改广告图的数据
      this.advImg = this.leftDatas[index].touch_catads;
      // 更改rightDats
      this.getRightDatas(cat_id);
    },
    toGoodsList(cat_id, cat_name) {
      this.$router.push("/goodslist/" + cat_id + '?title=' + cat_name);
    },
    getRightDatas(cat_id) {
      if (!cat_id) {
        cat_id = "858";
      }
      CategoryRightApi(cat_id).then((res) => {
        console.log(res.data);
        this.rightDatas = res.data.data;
      });
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取左边的数据
    CategoryListApi().then((res) => {
      console.log(res.data);
      this.leftDatas = res.data.data;
      // 右侧的广告图
      console.log(res.data.data[0].touch_catads);
      this.advImg = res.data.data[0].touch_catads;
    });
    // 得到右侧数据
    this.getRightDatas();
  },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，激活
  deactivated() { }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.category-content {
  width: 100%;
  height: calc(100% - 5rem - 5rem);
  display: flex;
  position: absolute;
  left: 0rem;
  top: 5rem;

  .left {
    width: 8.5rem;

    ul {
      li {
        height: 3.8rem;
        width: 100%;
        text-align: center;
        font-size: 1.3rem;
        color: #999;
        padding-top: 1rem;
        box-sizing: border-box;

        p {
          height: 2rem;
        }

        .active {
          border-left: 0.25rem solid #f23030;
          color: #f23030;
        }
      }

      .li-active {
        background: #fff;
      }
    }
  }

  .right {
    width: calc(100% - 8.5rem);
    height: 100%;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
    background: #fff;

    .adv {
      img {
        width: 27rem;
        height: 9rem;
      }
    }

    .item {
      .title {
        width: 100%;
        text-align: center;
        color: #333;

        i {
          color: #e0e0e0;
        }
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        // justify-content: center;
        align-items: center;

        li {
          width: 8.9rem;
          height: 8.2rem;
          text-align: center;
          margin-top: 2rem;

          span {
            display: block;
          }

          img {
            width: 5.2rem;
            height: 5.2rem;
          }
        }
      }
    }
  }

  //  使滚动条隐藏
  .right::-webkit-scrollbar {
    display: none;
  }
}
</style>